<template>
  <div class="goodInfo" >
    <div class="good-title">{{goodsInfo.title}}</div>
    <div class="good-price">
      <span class="new-price">￥{{goodsInfo.newPrice | number()}}</span>
      <span class="old-price">￥{{goodsInfo.oldPrice}}</span>
      <span class="good-price-other">活动价</span>
    </div>
    <div class="good-other">
      <div>销量 {{goodsInfo.discount}}</div>
      <div>收藏{{goodsInfo.coulmns}}人</div>
      <div style="text-align: right">72小时发货</div>
    </div>
  </div>
</template>

<script>
    export default {
        props:{
            goodsInfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        name: "GoodInfo",
        filters: {
            //保留2位小数点过滤器 不四舍五入
            number(value) {
                let toFixedNum = Number(value).toFixed(3);
                return toFixedNum.substring(0, toFixedNum.toString().length - 1);

            }
        },
    }
</script>

<style scoped>
  .goodInfo{
    padding: 10px;
    box-shadow: 0 4px 1px rgba(100, 100, 100, 0.1);
  }
  .good-title{
    font-weight: 500;
  }
  .good-price{
    margin: 10px 0;
    position: relative;
  }
  .new-price{
    color:var(--color-high-text);
    font-weight: 400;
    font-size: 22px;
    margin-right: 3px;
  }
  .old-price{
    position: relative;
    font-size: 12px;
    color: #A9A9A9;
    text-decoration: line-through;
    font-weight: 500;
    margin-right: 3px;
  }
  .good-price-other{
    background-color: var(--color-high-text);
    color: white;
    border-radius: 7px;
    font-size: 12px;
    padding:1px 4px;
    position: absolute;
  }
  .good-other{
    color: #A9A9A9;
    display: flex;
    margin-top: 20px;
    font-size: 15px;

  }
  .good-other div{
    flex: 1;
  }
</style>
